/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.html",
    "./pages/Blog/**/*.html",
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 添加Blog页面常用的颜色
      colors: {
        'blog': {
          'primary': '#2563eb',
          'secondary': '#4f46e5',
          'accent': '#3b82f6',
        },
        'insight': {
          'gradient-1': '#1a2a6c',
          'gradient-2': '#b21f1f',
          'gradient-3': '#fdbb2d',
        }
      },
      // 添加常用的阴影
      boxShadow: {
        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        'card-hover': '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        'card-hover-enhanced': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      },
      // 添加文本阴影
      textShadow: {
        'default': '0 2px 4px rgba(0,0,0,0.1)',
        'enhanced': '0 4px 8px rgba(0,0,0,0.25)',
      },
      // 添加行高限制
      lineClamp: {
        '2': '2',
        '3': '3',
        '4': '4',
      },
      // 添加背景渐变
      backgroundImage: {
        'hero-gradient': 'linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%)',
      },
      // 添加动画
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
      // 添加过渡效果
      transitionTimingFunction: {
        'bounce-in': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
      },
      // 添加间距
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
      // 添加z-index
      zIndex: {
        '60': '60',
        '70': '70',
      }
    },
  },
  plugins: [
    // 添加行高限制插件
    function({ addUtilities }) {
      const newUtilities = {
        '.line-clamp-2': {
          display: '-webkit-box',
          '-webkit-line-clamp': '2',
          '-webkit-box-orient': 'vertical',
          overflow: 'hidden',
        },
        '.line-clamp-3': {
          display: '-webkit-box',
          '-webkit-line-clamp': '3',
          '-webkit-box-orient': 'vertical',
          overflow: 'hidden',
        },
        '.line-clamp-4': {
          display: '-webkit-box',
          '-webkit-line-clamp': '4',
          '-webkit-box-orient': 'vertical',
          overflow: 'hidden',
        },
        // 添加文本阴影工具类
        '.text-shadow': {
          'text-shadow': '0 2px 4px rgba(0,0,0,0.1)',
        },
        '.text-shadow-enhanced': {
          'text-shadow': '0 4px 8px rgba(0,0,0,0.25)',
        },
        // 添加英雄区域渐变
        '.hero-gradient': {
          'background': 'linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%)',
        },
        // 添加导航滚动效果
        '.nav-scrolled': {
          'background-color': 'rgba(255, 255, 255, 0.95)',
          'backdrop-filter': 'blur(12px)',
          'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
        },
        // 添加筛选激活状态
        '.filter-active': {
          'background-color': '#2563eb',
          'color': '#ffffff',
        },
        // 添加内容可见性优化
        '.content-auto': {
          'content-visibility': 'auto',
        },
      }
      addUtilities(newUtilities)
    }
  ],
}
